<template>
<div class="container">
  <div class="search-bar">
    <div class="search-inner">
      <img src="../assets/images/search1@2x.png" alt="">
      <input type="text" placeholder="搜索营业部门" v-model="keyWord" :input="searchDep()">
    </div>
  </div>
  <div class="results">
    <div class="r-list" 
      v-for="item in searchResults"
      v-html="item.branchName"
      :key="item.branchCode"
      @click="tapDep(item.branchName,item.branchCode)"
      ></div>
    <!-- <div class="r-list">我就是股神</div>
    <div class="r-list">我就是股神</div> -->
    <!-- <div class="r-list">我就是是<i>股神</i></div> -->
    
  </div>
  <div class="empty" v-if="searchResults.length==0">
    <img src="../assets/images/info_icon@2x.png" alt="">
    <p>无匹配结果</p>
  </div>

  <Info v-if="postError.isShow" 
  @infoClose="closeDialog" 
  :txt="postError.txt"></Info>
</div>

</template>

<script>
import Api from '@/service';
import Info from '@/components/Info';
export default {
  name: 'SearchDep',
  data () {
    return {
      productId: this.$route.query.productId,
      keyWord: '',
      searchResults: [],
      postError: {
        txt: '',
        isShow: false
      }
    }
  },
  components: {
    Info
  },
  methods: {
    searchDep(){
      let _self = this;
      Api.sm.searchDep(_self.keyWord.trim())
      .then(function(response){
        // console.log(response.data.info);
        if(response.data.status == "success" && response.data.code==200 && response.data.info.length>0){
          _self.searchResults = response.data.info;

          for(let i=0; i<_self.searchResults.length; i++){
            let _temp = _self.searchResults[i],
                _keyWord = _self.keyWord.trim(),
                _branchName = _temp.branchName;

            _branchName =_branchName.replace(_keyWord,"<i style='color:#333;font-style:normal;'>"+_keyWord+"</i>");
            _temp.branchName = _branchName;
            _self.searchResults.splice(i,1,_temp);
          }
        }
        else if(response.data.status == "success" && response.data.code!=200){
          // 弹窗信息 
          _self.postError.txt = response.data.message;
          _self.postError.isShow = true;
        }
        else if(response.data.status == "failure"){
          // 统一刷新
        }

      });
    },
    tapDep(branchName,branchCode){
      this.$router.push({path:'/Select',query:{productId:this.productId,branchName:branchName,branchCode:branchCode}});
    }
  },
  created: function(){
  }
}
</script>

<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
  width: 100%;
  /*background: #F5F8FA;*/
  overflow: hidden;
  box-sizing: border-box;
  .search-bar{
    width: 100%;
    background:white;
    height: calculateRem(54px);
    padding: calculateRem(9px) calculateRem(16px);
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    /*border-bottom: 1px solid #f1f1f1;*/
    .search-inner{
      width: 100%;
      height: calculateRem(36px);
      box-sizing: border-box;
      border-radius: 2px;
      border: 1px solid #E1E5E8;
      >img{
        width: calculateRem(14px);
        height: calculateRem(14px);
        margin-right: calculateRem(9px);
        margin-left: calculateRem(11px);
        vertical-align: text-top;
      }
      >input{
        width: 80%;
        height: calculateRem(34px);
        box-sizing: border-box;
        outline: none;
        border: transparent;
        font-size: calculateRem(16px);
        color: #333;

      }
    }
  }
  .results{
    width: 100%;
    height: auto;
    padding: calculateRem(54px) calculateRem(16px) 0;

    .r-list{
      width: 100%;
      height: calculateRem(47px);
      line-height: calculateRem(46px);
      box-sizing: border-box;
      border-bottom: 1px solid #f1f1f1;
      font-size: calculateRem(17px);
      color: #888;
      text-indent: calculateRem(36px);
      @include ell;
      >i{
        color: #333;
        font-style: normal;
      }
    }
  }

  .empty{
    text-align: center;
    >img{
      width: calculateRem(60px);
      height: calculateRem(60px);
      margin-top: calculateRem(95px);
    }
    >p{
      color: #5C656B;
      font-size: calculateRem(15px);
      margin-top: calculateRem(16px);
    }
  }
}

</style>
